<script setup>
import { reactive, ref } from "vue";

// 登录表单数据
const formState = reactive({
  username: "",
  password: "",
  remember: true,
});

const validateUser = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入用户名");
  } else {
    if (formState.username !== "123456") {
      return Promise.reject("用户名不存在");
    }
    return Promise.resolve();
  }
};
const validatePass = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("密码不能少于6位");
  } else {
    if (formState.password !== "123456") {
      return Promise.reject("密码错误");
    }
    return Promise.resolve();
  }
};

// 忘记密码表单
const formState_tow = reactive({
  email: "",
  verification: "",
  password_tow: "",
  passwords: "",
});
const validateEmail = async (_rule, value) => {
  let aqq = /^[1-9][0-9]{4,10}@qq.com$/;
  if (value === "") {
    return Promise.reject("请输入邮箱");
  } else {
    if (!aqq.test(formState_tow.email)) {
      return Promise.reject("请输入正确的邮箱");
    }
    return Promise.resolve();
  }
};
const validateVerification = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入验证码");
  } else {
    if (formState_tow.verification !== "1314") {
      return Promise.reject("验证码有误");
    }
    return Promise.resolve();
  }
};
const validatePassword_tow = async (_rule, value) => {
  let aqq = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
  if (value === "") {
    return Promise.reject("请输入密码");
  } else {
    if (!aqq.test(formState_tow.password_tow)) {
      return Promise.reject("密码为6-10位数字和字母的组合");
    }
    return Promise.resolve();
  }
};
const validatePasswords = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入确认密码");
  } else if (value !== formState_tow.password_tow) {
    return Promise.reject("确认密码与设置密码不同，请重新输入");
  } else {
    return Promise.resolve();
  }
};

// 注册表单数据
const formState_three = reactive({
  username_three: "",
  email_three: "",
  password_three: "",
  passwords_three: "",
  verification_three: "",
});

const validateEmail_three = async (_rule, value) => {
  let aqq = /^[1-9][0-9]{4,10}@qq.com$/;
  if (value === "") {
    return Promise.reject("请输入邮箱");
  } else {
    if (!aqq.test(formState_three.email_three)) {
      return Promise.reject("请输入正确的邮箱");
    }
    return Promise.resolve();
  }
};
const validateVerification_three = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入验证码");
  } else {
    if (formState_three.verification_three !== "1314") {
      return Promise.reject("验证码有误");
    }
    return Promise.resolve();
  }
};
const validatePassword_three = async (_rule, value) => {
  let aqq = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
  if (value === "") {
    return Promise.reject("请输入密码");
  } else {
    if (!aqq.test(formState_three.password_three)) {
      return Promise.reject("密码为6-10位数字和字母的组合");
    }
    return Promise.resolve();
  }
};
const validatePasswords_three = async (_rule, value) => {
  if (value === "") {
    return Promise.reject("请输入确认密码");
  } else if (value !== formState_three.password_three) {
    return Promise.reject("确认密码与设置密码不同，请重新输入");
  } else {
    return Promise.resolve();
  }
};

// 表单切换
const formRef = ref(null);
const login = ref(null);
const sign = ref(null);
const slip = () => {
  formRef.value.style.display = "block";
  login.value.style.display = "none";
};
const logins = () => {
  formRef.value.style.display = "none";
  login.value.style.display = "block";
};
const signs = () => {
  login.value.style.display = "none";
  sign.value.style.display = "block";
};
const to_logins = () => {
  login.value.style.display = "block";
  sign.value.style.display = "none";
};

// 提交
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>
<template>
  <div style="background-color: #f5f5f5">
    <div class="container">
      <div class="content">
        <div class="logo" style="font-size: 20px">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            style="font-size: 30px; height: 30px"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12 21a9 9 0 100-18 9 9 0 000 18zm0-4.737a4.263 4.263 0 100-8.526 4.263 4.263 0 000 8.526z"
              fill="#165DFF"
            ></path>
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M16.263 7.737H21v4.353l-.013.384h-4.75c.024-.237.026-.41.026-.41V7.737zM11.526 3.013c.207-.01.402-.013.402-.013h4.335v4.737h-4.35s-.202.004-.387.025v-4.75z"
              fill="#165DFF"
            ></path>
            <path fill="#16D2AC" d="M15 3h6v6h-6z"></path></svg
          ><span>Arco</span>
        </div>
        <div class="content-inner">
          <!-- 登录表单 -->
          <div ref="login">
            <a-form
              :model="formState"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <div class="login-form-title">登录 Arco</div>
              <div class="login-form-sub-title">内部项目管理系统</div>
              <a-form-item
                name="username"
                :rules="[
                  {
                    required: true,
                    trigger: 'blur',
                    validator: validateUser,
                  },
                ]"
              >
                <a-input
                  v-model:value="formState.username"
                  placeholder="请输入用户名"
                >
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item
                name="password"
                :rules="[
                  {
                    required: true,
                    validator: validatePass,
                    trigger: 'blur',
                  },
                ]"
              >
                <a-input-password
                  v-model:value="formState.password"
                  placeholder="请输入密码"
                >
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>

              <a-form-item>
                <a-form-item name="remember" no-style>
                  <a-checkbox
                    v-model:checked="formState.remember"
                    :class="{ colors: formState.remember }"
                    >记住密码</a-checkbox
                  >
                </a-form-item>
                <a class="login-form-forgot" @click="slip()">忘记密码</a>
              </a-form-item>
              <a-space wrap>
                <a-button type="primary" html-type="submit">登录</a-button>
                <a-button @click="signs()">注册</a-button>
              </a-space>
            </a-form>
          </div>
          <!-- 忘记密码表单 -->
          <div ref="formRef" style="display: none">
            <a-form
              :model="formState_tow"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <a-form-item
                style="margin-top: 20px"
                name="email"
                :rules="[
                  { required: true, validator: validateEmail, trigger: 'blur' },
                ]"
              >
                <a-input
                  v-model:value="formState_tow.email"
                  placeholder="请输入邮箱"
                >
                  <template #prefix>
                    <MailOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item
                name="verification"
                :rules="[
                  {
                    required: true,
                    validator: validateVerification,
                    trigger: 'blur',
                  },
                ]"
              >
                <a-input
                  v-model:value="formState_tow.verification"
                  placeholder="验证码"
                  style="width: 206px"
                >
                  <template #prefix>
                    <VerifiedOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
                <a-button type="primary" style="width: 111.6px"
                  >获取验证码</a-button
                >
              </a-form-item>

              <a-form-item
                name="password_tow"
                :rules="[
                  {
                    required: true,
                    validator: validatePassword_tow,
                    trigger: 'blur',
                  },
                ]"
              >
                <a-input-password
                  v-model:value="formState_tow.password_tow"
                  placeholder="新密码"
                >
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item
                name="passwords"
                :rules="[
                  {
                    required: true,
                    validator: validatePasswords,
                    trigger: 'blur',
                  },
                ]"
              >
                <a-input-password
                  v-model:value="formState_tow.passwords"
                  placeholder="确认密码"
                >
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-space class="form_tow">
                <a-button type="primary" html-type="submit" class="MyBtn"
                  >重置密码</a-button
                >
                <a-button class="MyBtn" @click="logins()">去登录</a-button>
              </a-space>
            </a-form>
          </div>
          <!-- 注册表单 -->
          <div ref="sign" style="display: none">
            <a-form
              :model="formState_three"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <a-form-item
                name="username_three"
                :rules="[
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                ]"
              >
                <a-input
                  v-model:value="formState_three.username_three"
                  placeholder="请输入用户名"
                >
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item
                name="email_three"
                :rules="[
                  {
                    required: true,
                    trigger: 'blur',
                    validator: validateEmail_three,
                  },
                ]"
              >
                <a-input
                  v-model:value="formState_three.email_three"
                  placeholder="请输入邮箱"
                >
                  <template #prefix>
                    <MailOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item
                name="verification_three"
                :rules="[
                  {
                    required: true,
                    trigger: 'blur',
                    validator: validateVerification_three,
                  },
                ]"
              >
                <a-input
                  v-model:value="formState_three.verification_three"
                  placeholder="验证码"
                  style="width: 206px"
                >
                  <template #prefix>
                    <VerifiedOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
                <a-button type="primary" style="width: 111.6px"
                  >获取验证码</a-button
                >
              </a-form-item>

              <a-form-item
                name="password_three"
                :rules="[
                  {
                    required: true,
                    trigger: 'blur',
                    validator: validatePassword_three,
                  },
                ]"
              >
                <a-input-password
                  v-model:value="formState_three.password_three"
                  placeholder="设置密码"
                >
                  <template #prefix>
                    <UnlockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item
                name="passwords_three"
                :rules="[
                  {
                    required: true,
                    trigger: 'blur',
                    validator: validatePasswords_three,
                  },
                ]"
              >
                <a-input-password
                  v-model:value="formState_three.passwords_three"
                  placeholder="确认密码"
                >
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-space class="form_tow">
                <a-button type="primary" html-type="submit" class="MyBtn"
                  >注册</a-button
                >
                <a-button class="MyBtn" @click="to_logins">去登录</a-button>
              </a-space>
            </a-form>
          </div>
        </div>
        <div class="content-footer">© 2023 HOPU | 鄂ICP备29218126号-1</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.colors {
  color: #1677ff;
}
.container {
  font-family: "PingFang SC", Arial, "Microsoft YaHei", sans-serif;
  display: flex;
  height: 100vh;
  background-image: url(../assets/bg.svg);
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
}

.container .content {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
}
.container .logo {
  position: fixed;
  top: 24px;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
}
.container .content-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 3;
  color: #999;
  font-size: 14px;
}
.login-form {
  position: relative;
  min-width: 320px;
  overflow: hidden;
  height: 390px;
  padding: 5px;
}
.login-form-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: #1d2129;
  user-select: none;
}
.login-form-sub-title {
  font-size: 16px;
  line-height: 24px;
  color: #86909c;
  margin-bottom: 40px;
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
:deep(.ant-form-item-control-input-content) {
  display: flex;
  justify-content: space-between;
}
:where(.css-dev-only-do-not-override-3m4nqy).ant-input-affix-wrapper {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  background-color: #ffffff;
  background-image: none;
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  height: 40px;
  border-radius: 6px;
  transition: all 0.2s;
}
:deep(button) {
  width: 320px;
  height: 39.6px;
}
:where(.css-dev-only-do-not-override-3m4nqy).ant-space {
  display: inline-flex;
  flex-direction: column;
}
:deep(.ant-input-prefix) {
  color: #c0c4cc;
}
.MyBtn {
  width: 158.8px;
  height: 39.6px;
}
.form_tow {
  display: flex;
  flex-direction: row;
}
:deep(.ant-form-item-explain-error) {
  color: #ff4d4f;
  font-size: 13px;
  padding-left: 11px;
}
</style>
